<template>
    <main-layout title="采购订单管理" :showNew="true" @newEvent="toNewPage">
        <div class="page-container">
            <header class="my-header">
                <input type="text" v-model="queryObj.projectName" placeholder="输入项目名称">
                <van-dropdown-menu class="purchase-dropdown">
                    <van-dropdown-item v-model="queryObj.state" :options="stateList" />
                </van-dropdown-menu>
                <i class="icon"></i>
            </header>
            <section>
                <ul @scroll="scrollEvt" class="page-list-box">
                    <van-swipe-cell class="item" v-for="item in list" :key="item.id">
                        <template #left>
                            <!-- <van-button class="my-btn" @click="$router.push('/purchase/detail?id=' + item.id)" square type="primary" text="详情"/> -->
                            <van-button class="my-btn" @click="$router.push({path: '/purchase/detail', query: {id: item.id}})" square type="primary" text="详情"/>
                        </template>

                        <span class="span t">
                            {{item.projectName}}
                            <em>{{item.state}}</em>
                        </span>
                        <span class="span">创建人：{{item.createName}}</span>
                        <!-- 在vue中可以定义一个展示过滤器，这个可以实现展示时对展示内容进行定义，在标签上是用过滤器需要添加一个 | 符号，在符号后边直接写过滤器方法名字 -->
                        <!-- Failed to resolve filter: df -->
                        <span class="span">创建日期：{{item.createTime | df('yyyy年MM月dd日 hh时mm分')}}</span>
                        <span class="span">材料：{{`${item.materialName} -- ${item.materialWeight} ${item.materialUnit}`}}</span>

                        <template #right>
                            <van-button v-if="item.state === '新建'" class="my-btn" square type="warning" text="编辑" />
                            <van-button v-if="item.state === '新建'" class="my-btn" square type="danger" text="删除" />
                            <van-button @click="approveEvt(item)" v-if="item.state === '新建'" class="my-btn" square type="primary" text="确认" />
                            <van-button @click="approveEvt(item)" v-if="item.state === '确认'" class="my-btn" square type="primary" text="在途" />
                            <van-button @click="approveEvt(item)" v-if="item.state === '在途'" class="my-btn" square type="primary" text="完成" />
                            <van-button v-if="item.state === '完成'" class="my-btn" square type="primary" text="付款" />
                        </template>
                    </van-swipe-cell>
                    <!-- <li class="item" v-for="item in list" :key="item.id">
                        <span class="t">
                            {{item.projectName}}
                            <em>{{item.state}}</em>
                        </span>
                        <span>创建人：{{item.createName}}</span>
                        <span>创建日期：{{item.createTime | df('yyyy年MM月dd日 hh时mm分')}}</span>
                        <span>材料：{{`${item.materialName} -- ${item.materialWeight} ${item.materialUnit}`}}</span>
                    </li> -->

                    <!-- 在系统中应该有以下：编辑和删除 -- 新增状态展示，并且只能是创建人操作 -->
                    <!-- 确认按钮 -- 只能是选择的审批人有权限 -- 只能在新增状态 -->
                    <!-- 在途(确认时显示)和完成(在途时展示)按钮 -- 只能是创建人可以操作 -->
                    <!-- 付款按钮 -- 完成时展示 -->
                    <li>
                        <span v-if="loading" class="loading">加载中...</span>
                        <!-- 加载完成以后，如果有更多数据，则显示第一个，否则显示第二个 -->
                        <span v-if="!loading && hasMore" class="loading">上滑加载更多</span>
                        <span v-if="!hasMore && !loading" class="loading">不要滑了，没有了</span>
                    </li>
                </ul>
            </section>
        </div>

        <!-- 确认、在途、完成弹出框 -->
        <van-popup v-model="approveShow" position="bottom" :style="{ height: '400px' }">
            <p style="font-size: .7rem; padding: 0 8px;">审批意见</p>
            <van-steps :active="active" active-icon="success" active-color="#38f">
                <van-step v-for="it in stepList" :key="it.text">{{it.value}}</van-step>
            </van-steps>
            <van-form @submit="onSubmit">
                <van-field name="radio" label="是否同意">
                    <template #input>
                        <van-radio-group v-model="approveObj.isReject" direction="horizontal">
                            <van-radio :name="false" checked-color="#ff5b02">通过</van-radio>
                            <van-radio :name="true" checked-color="#ff5b02">驳回</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-model="approveObj.userName"
                    readonly
                    label="审批人"/>
                <van-field v-model="approveObj.remark"
                    placeholder="输入审批意见"
                    label="审批意见"
                    type="textarea"
                    :rules="[{required: true, message: '输入审批意见'}]"/>
                <div style="margin: 16px;">
                    <van-button round block type="info" color="#ff5b02" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </van-popup>
    </main-layout>
</template>

<script>
    import { purchaseFlowApi, purchaseListApi } from '../../apis/puchaseApi'
    const stepList = [
            { text: '新建', value: '新建' },
            { text: '确认', value: '确认' },
            { text: '在途', value: '在途' },
            { text: '完成', value: '完成' }
        ]

    export default {

        data() {
            return {
                list: [],
                loading: true,
                hasMore: true,
                stepList,
                stateList: [
                    { text: '全部', value: '' },
                    ...stepList,
                    { text: '作废', value: '作废' }
                ],
                queryObj: {
                    projectName: '',
                    state: '',
                    page: 1,
                    size: 6
                },
                approveShow: false,
                approveObj: {
                    id: '',
                    isReject: false,
                    userId: '',
                    userName: '',
                    remark: ''
                },
                approveState: ''
            }
        },

        computed: {
            userInfo() {
                return this.$store.getters['common/userInfo']
            },
            active() {
                return this.stepList.findIndex(it => it.text === this.approveState) + 1
            }
        },

        created() {
            this.getList()
        },

        methods: {
            toNewPage() {

            },

            // 获取页面数据的方法
            async getList() {
                let result = await purchaseListApi(this.queryObj)

                // 所有的数据应该是需要进行拼接，计算是否有下一页数据，要在虚拟dom异步渲染之后来进行节流标识修改
                if (result.code === 200) {
                    this.list = this.list.concat(result.data.rows)
                    this.hasMore = this.queryObj.page * this.queryObj.size < result.data.total
                }

                setTimeout(() => {
                    this.loading = false
                })
            },

            // 页面加载滚动事件
            scrollEvt(evt) {
                // 页面一定要滚动到最底部，并且页面没有在执行数据加载，后端还有数据没有获取回来
                let isBottom = (evt.target.clientHeight + evt.target.scrollTop + 20) > evt.target.scrollHeight
                if (isBottom && !this.loading && this.hasMore) {

                    // 需要查询下页数据，开启节流标识，调用数据接口
                    this.queryObj.page += 1
                    this.loading = true
                    this.getList()
                }
            },

            // 审批事件
            approveEvt(item) {
                // 找到当前需要进行的环节，根据这个环节来定义权限
                // 确认需要时审批人员才能执行，其它都是只有创建者才能执行
                let idx = this.stepList.findIndex(it => it.text === item.state) + 1
                let name = this.stepList[idx].value
                
                if (name === '确认' && !item.nextId.includes(this.userInfo.id)) {
                    this.$toast.fail('您不具备确认权限')
                    return
                }

                // 对弹出框中的数据进行重置
                this.approveObj.id = item.id
                this.approveObj.isReject = false
                this.approveObj.userId = this.userInfo.id
                this.approveObj.userName = this.userInfo.name
                this.approveObj.remark = ''
                this.approveState = item.state

                // 打开弹出框
                this.approveShow = true
            },

            // 审批提交事件
            async onSubmit() {
                let result = await purchaseFlowApi(this.approveObj),
                    stateIndex = this.stepList.findIndex(it => it.text === this.approveState) + 1

                if (result.code === 200) {
                    this.$toast.success(`${this.stepList[stateIndex].text}成功`)
                    // 因为审批成功，单据的状态发生变化 -- 应该去获取数据(假如已经下滑几页了，不知道是那页的哪条数据更新--请求数据不合理)，还是怎么处理?
                    // 找到对应的数据，直接把页面上的数据状态更新
                    // 如果是通过
                    if (!this.approveObj.isReject) {
                        // 利用的是对象是引用关系的特性
                        this.list.map(it => {
                            if (it.id === this.approveObj.id) it.state = this.stepList[stateIndex].value
                        })
                    } else {
                        // 如果是驳回，则需要把状态进行回退
                        let idx = this.list.findIndex(it => it.id === this.approveObj.id),
                            nowIdx = stateIndex - 2

                        this.list[idx].state = this.stepList[nowIdx >= 0 ? nowIdx : 0].value
                    }
                } else {
                    this.$toast.fail(`${this.stepList[stateIndex].text}失败`)
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";

    .my-header {
        display: flex;
        > input {
            flex: 1;
            border: none;
            outline: none;
            background-color: transparent;
            font-size: .7rem;
            text-indent: 12px;
        }

        > .icon {
            flex: 0 0 48px;
            background: url(../../images/search-icon.png) center center / 26px 26px no-repeat;
        }
    }
</style>